<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/frm_base.css}" />
    <script th:src="@{/js/jquery-3.5.1.js}"></script>
    <style>
        .tree{
            padding: 10px 20px;
        }
        .nav_top{
            padding: 20px 20px 10px 20px;
        }
    </style>
</head>
<body>
<div class="main">

    <div class="layui-row">
        <div class="layui-col-md2 tree">
            <div id="academyTree"></div>
        </div>
        <div class="layui-col-md10">
            <div class="nav_top">
                <span class="layui-breadcrumb">
                  <a href="javaScript:void(0);" class="nav1"></a>
                  <a><cite class="nav2"></cite></a>
                </span>
            </div>
            <hr class="layui-bg-green">
            <div class="container head">
                <button class="layui-btn layui-btn-normal" type="button" id="addBtn">添加</button>
            </div>
            <div class="container content">
                <table class="layui-hide" id="clazz" lay-filter="clazz"></table>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="remove">删除</button>
    </div>
</script>

<script type="text/html" id="dialogHtml">
    <div id="dialog">
        <form action="" class="layui-form" lay-filter="dialog-form">
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">班名</label>
                <div class="layui-input-block">
                    <input type="text" name="clazzName" lay-verify="required" autocomplete="off" placeholder="请输班级名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">编号</label>
                <div class="layui-input-block">
                    <input type="text" name="clazzNo" lay-verify="required" autocomplete="off" placeholder="请输班级编号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">专业</label>
                <div class="layui-input-block">
                    <select name="subjectId" id="subject" lay-verify="required" lay-filter="subject"></select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">辅导员</label>
                <div class="layui-input-block">
                    <select name="instructor" id="instor" lay-verify="required" lay-filter="instructor"></select>
                </div>
            </div>
            <div class="layui-form-item" style="display: none">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="dialogBtn" id="dialogBtn">提交</button>
                </div>
            </div>
        </form>
    </div>
</script>

<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    layui.use(['element', 'layer', 'form', 'table','tree'], function () {
        var form = layui.form,
            layer = layui.layer,
            tree = layui.tree,
            table = layui.table;

        var flag = 'add';
        // 保存在页面上点击的树型列表中的专业
        var subjectId = 0;
        var subjectArr = [];
        var instors = [];

        getTree();
        getInstor()

        $('#addBtn').click(function () {
            flag = 'add';
            showDialog();
        })

        // 搜索提交
        form.on('submit(searchBtn)', function (data) {
            search(data.field) // data.field是一个js对象
            return false;
        })

        // 新增提交
        form.on('submit(dialogBtn)', function (data) {
            var formData = data.field;
            console.log(formData)
            update(formData, flag)
            return false;
        })

        //监听工具条
        table.on('tool(clazz)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event;
            console.log(data)
            if (layEvent === 'remove') { //删除
                layer.confirm('真的删除？', function (index) {
                    remove(data);
                });
            } else if (layEvent === 'edit') { //编辑
                flag = 'edit';
                showDialog(data);
            }
        });

        // 获取所有辅导员
        function getInstor() {
            $.get('/ssms/sysUser/all/2',function (res) {
                if(res.code == 200){
                    instors.push(new Option('不选', -1));
                    res.data.map(function (item) {
                        instors.push(new Option(item.username, item.id))
                    })
                }
            })
        }

        function getTree() {
            $.get("/ssms/academy/academyTree",function (res) {
                if(res.code == 200){
                    tree.render({
                        elem: '#academyTree'  //绑定元素
                        ,accordion:true
                        ,data:res.data
                        ,click: function(obj){
                            if(obj.data.field == 'subject'){
                                var subject = obj.data //得到当前点击的节点数据
                                subjectId = subject.id;
                                initTable(subjectId)
                                $('.nav2').text(subject.title)
                            }else{
                                // 点击院系时，获取对应的专业列表
                                var academy = obj.data
                                getSubjectByAcademy(academy.id)
                                $('.nav1').text(academy.title)
                                $('.nav2').text('')
                            }
                        }
                    })
                }
            })
        }

        // 更新、新增
        function update(param, flag) {

            var url = flag == 'add' ? '/ssms/clazz/add' : '/ssms/clazz/update';
            $.post(url,param,function (res) {
                if (res.code == 200) {
                    reloadTable();
                    if (layerIdx) layer.close(layerIdx);
                } else {
                    layer.msg(res.msg, {icon: 5, time: 1000})
                }
            })
        }

        // 删除
        function remove(data) {
            $.post('/ssms/clazz/delete',{id: data.id},function (res) {
                if (res.code == 200) {
                    reloadTable();
                    layer.msg('删除成功', {icon: 6, time: 1000})
                } else {
                    layer.msg(res.msg, {icon: 5, time: 1000})
                }
            })
        }

        function showDialog(clazz) {
            layerIdx = layer.open({
                type: 1,
                area: ['400px', '400px'],
                title: '编辑',
                btn: ['提交'],
                content: $('#dialogHtml').html(),
                success:function(){
                    initDialogForm(clazz);
                },
                yes: function () {
                    // 弹窗的确定按钮监听
                    $('#dialogBtn').click();
                }
            });
        }

        function getSubjectByAcademy(academyId) {
            $.get('/ssms/subject/list/academy/'+academyId,function (res) {
                if(res.code == 200){
                    subjectArr = res.data
                }
            })
        }

        function initDialogForm(clazz) {
            $.each(subjectArr, function (index, item) {
                $('#subject').append(new Option(item.subjectName, item.id));
            });
            instors.map(function (value) {
                $('#instor').append(value);
            })

            form.render("select"); // 重载表单的select

            // 如果是编辑时，初始化弹窗的输入框
            if (clazz) {
                form.val("dialog-form", clazz)
            }
            form.render()
        }

        // 初始化表格
        function initTable(subjectId) {

            table.render({
                elem: '#clazz'
                // ,width:1000
                , url: '/ssms/clazz/list'
                , where:{subjectId:subjectId}
                , cols: [[
                    {type: 'numbers', width: 80}
                    ,{field: 'clazzName',width: 100, title: '班名'}
                    ,{field: 'clazzNo',width: 100, title: '编号'}
                    ,{field: 'instor',width: 100, title: '辅导员',templet:function (d) {
                            if(d.instor){
                                return d.instor.username
                            }else{
                                return '无'
                            }
                        }}
                    , {field: 'subject', title: '专业',templet:'<div>{{d.subject.subjectName}}</div>'}
                    , {field: 'tot',width: 100, title: '学生人数'}
                    , {title: '操作', toolbar: '#toolbar', width: 150}
                ]]
                , page: true
            });
        }

        // 表格搜索
        function search(fieldObj) {
            console.log(fieldObj)
            table.reload('clazz', {
                url: '/ssms/clazz/list'
                , where: fieldObj
                , page: {
                    curr: 1
                }
            });
        }
        // 重新加载
        function reloadTable() {
            table.reload('clazz', {
                url: '/ssms/clazz/list',
            });
        }
    });
</script>
</body>
</html>